<template>
	<div class="device-tree-list">
		<div class="title">
			<p>摄像头列表</p>
			<span>每个摄像头最多配置7个算法</span>
		</div>
		<global-input-search
			v-model:value="searchValue"
			placeholder="关键字"
			style="width: calc(100% - 16px); margin-top: 16px; margin-left: 8px"
		></global-input-search>
		<devices-tree
			ref="refTree"
			v-if="showTree"
			v-model:selected-keys="selectedKeys"
			v-model:expanded-keys="expandedKeys"
			:search-value="searchValue"
			:tree-data="treeData"
			:video-plays="selectedKeys"
			:offline-can-check="true"
			@select="TreeSelect"
		></devices-tree>
	</div>
</template>

<script lang="ts" setup>
import DevicesTree from './DevicesTree.vue';
import { realVideoApi } from '@/view-modules/monitoring-center/api';
import type { CameraInfoState } from '../../../type';

type TsProps = {
	deviceTreeKey: any;
};
const props = withDefaults(defineProps<TsProps>(), {
	deviceTreeKey: '' // 是否允许切换原图
});

const emits = defineEmits<{
	(e: 'deviceChange', value: any, isMounted: boolean): void; // 点击展开收起事件
}>();

const route = useRoute();
// 树数据
const treeData = ref([]);
const showTree = ref(false);
const refTree = ref();
const selectedKeys = ref<string[]>([]); // 树选择
const expandedKeys = ref<(string | number)[]>([]); // 树展开
const searchValue = ref<string>(''); // 搜索值

const watchStop = watch(
	() => props.deviceTreeKey,
	(key) => {
		if (key) {
			selectedKeys.value = key;
		}
	}
);

const changeDevice = (item: any, isMounted: boolean = false) => {
	let data: CameraInfoState = {
		cameraId: item.areaOrDeviceId,
		name: item.name,
		boxSerial: item.boxSerial,
		id: item.boxDeviceId,
		status: item.status,
		url: item.webrtc,
		deviceTreeKey: item.id,
		aiSrvCountV2: item.aiSrvCountV2,
		deviceType: item.deviceType
	};
	emits('deviceChange', data, isMounted);
};

const TreeSelect = (node: any): void => {
	// 不能选择组织
	if (node.dataRef.type === 1) {
		selectedKeys.value = props.deviceTreeKey;
		return;
	}

	if (node.checked === false && selectedKeys.value.length === 0) {
		node.checked = true;
		selectedKeys.value = [node.dataRef.id];
		return;
	}
	changeDevice(node.dataRef);
};

// 根据disabled属性对children数组进行排序
const getDisabledSort = async (data: any): Promise<void> => {
	for (let i = 0; i < data.length; i++) {
		const node = data[i];

		if (node.children) {
			node.children.sort((a: any, b: any) => (a.disabled === b.disabled ? 0 : a.disabled ? 1 : -1));
			node.children.forEach((item: any, index: number, arr: any) => {
				if (item.disabled) {
					arr[index].disabled = false;
				}
			});
			if (node.children) {
				getDisabledSort(node.children);
			}
		}
	}
};

// 当前播放列表
const getTree = async (): Promise<void> => {
	try {
		let res: TsRes = await realVideoApi.tree();
		if (res) {
			treeData.value = res.data;
			showTree.value = true;
			await getDisabledSort(treeData.value);
			expandedKeys.value = [];
			await queryExpandKeys(treeData.value, route.query.cameraId as string);
		}
	} catch (error) {
		console.log('error', error);
	}
};
const queryExpandKeys = async (treeData: any, currentCameraId: string) => {
	for (let i = 0; i < treeData.length; i++) {
		const element = treeData[i];

		if (element.id.toString() === currentCameraId) {
			expandedKeys.value.push(element.parentId);

			selectedKeys.value = [element.id];

			changeDevice(element, true);

			return;
		}
		if (element.children) {
			queryExpandKeys(element.children, currentCameraId);
		}
	}
};

onMounted(async () => {
	await getTree();
});
onUnmounted(() => {
	watchStop();
});

defineExpose({
	getTree
});
</script>

<style lang="less" scoped>
:where(.ant-tree) {
	background: transparent !important;
}

.device-tree-list {
	width: var(--cameras-tree-width);
	height: 100%;
	padding: 12px 16px 0;
	color: @text01 !important;
	background: transparent !important;

	.title {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 34px;
		font-size: 14px;
		font-weight: 700;
		font-style: normal;
		line-height: 34px;
		color: @text02;

		> span {
			font-size: 12px;
			font-weight: 400;
			color: @text04;
		}

		&::after {
			position: absolute;
			bottom: -8px;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: @mask02;
			content: '';
		}
	}

	// :deep(.ant-tree),
	// .device-tree {
	// 	margin-top: 15px;
	// 	color: @text01 !important;
	// 	background: transparent !important;
	// }
	:deep(.global-input-search) {
		width: 100% !important;
		margin-top: 22px !important;
		margin-left: 0 !important;
	}

	:deep(.devices-tree) {
		height: calc(100% - 100px) !important;
		padding: 0;
	}
}
</style>
